<template>
  <div class="invoice-wrapper">
    <a-page-header title="发票管理" :show-back="false">
      <template #extra>
        <a-button type="primary" @click="routeToAdd" v-if="addInvoiceButtonShow"
          >添加发票</a-button
        >
      </template>
      <template #subtitle>
        <a-tag :color="sellerName === '顺丰' ? 'blue' : 'green'">{{ sellerName }}</a-tag>
      </template>
    </a-page-header>
    <div class="main">
      <a-form :model="searchForm" layout="inline">
        <a-form-item>
          <a-input
            v-model="searchForm.buyer"
            placeholder="请输入开票名称"
            allow-clear
          ></a-input>
        </a-form-item>
        <a-form-item>
          <a-select
            v-model="searchForm.invoiceType"
            placeholder="请选择开票种类"
            allow-clear
            :options="invoiceTypes"
          ></a-select>
        </a-form-item>
        <a-form-item>
          <a-month-picker v-model="searchForm.month" format="YYYY年MM月" style="width: 100%;"></a-month-picker>
        </a-form-item>
        <a-button class="query-btn" type="primary" @click="query"
          >查询</a-button
        >
        <a-button @click="reset">重置</a-button>
      </a-form>
      <a-spin :loading="loading">
        <a-tabs v-model:active-key="active">
          <a-tab-pane key="init" :title="`未开票(${data.initPageInfo.total})`">
            <statistic
              :total="data.initStatistic.count"
              :sum="data.initStatistic.amount"
            ></statistic>
            <invoice-list
              :list="data.initData"
              :current="data.initPageInfo.current"
              :size="data.initPageInfo.size"
              :total="data.initPageInfo.total"
              @pageSizeChange="(pageSize) => freshOne('INIT', pageSize)"
              @change="(page) => pageChange('INIT', page)"
            ></invoice-list>
          </a-tab-pane>
          <a-tab-pane
            key="added"
            :title="`待验收(${data.addedPageInfo.total})`"
          >
            <statistic
              :total="data.addedStatistic.count"
              :sum="data.addedStatistic.amount"
            ></statistic>
            <invoice-list
              :list="data.addedData"
              :current="data.addedPageInfo.current"
              :size="data.addedPageInfo.size"
              :total="data.addedPageInfo.total"
              @pageSizeChange="(pageSize) => freshOne('ADDED', pageSize)"
              @change="(page) => pageChange('ADDED', page)"
            ></invoice-list>
          </a-tab-pane>
          <a-tab-pane
            key="finished"
            :title="`已完成(${data.finishPageInfo.total})`"
          >
            <statistic
              :total="data.finishStatistic.count"
              :sum="data.finishStatistic.amount"
            ></statistic>
            <invoice-list
              :list="data.finishedData"
              :current="data.finishPageInfo.current"
              :size="data.finishPageInfo.size"
              :total="data.finishPageInfo.total"
              @pageSizeChange="(pageSize) => freshOne('FINISHED', pageSize)"
              @change="(page) => pageChange('FINISHED', page)"
            ></invoice-list>
          </a-tab-pane>
        </a-tabs>
      </a-spin>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import { getStatistic, Invoice, page } from "@/api/invoiceController";
import { formatMoney } from "@/utils/tools";
import router from "@/router";
import { useRoute } from "vue-router";
import { invoiceTypes } from "@/views/invoice/enums";
import InvoiceList from "@/views/invoice/invoiceList.vue";
import { userStore } from "@/store/user.ts";
import statistic from "@/views/invoice/statistic.vue";
import { log } from "console";

const active = ref<string>("init");
const loading = ref<boolean>(false);
const route = useRoute();

watch(
  () => route.name,
  () => {
    query();
  }
);

const searchForm = ref({
  buyer: "",
  invoiceType: "",
  month: ""
});

const sellerName = computed(() => {
  if (route.name === "发票管理(顺丰)") {
    return "顺丰";
  }
  if (route.name === "发票管理(合丰)") {
    return "合丰";
  }
});

const data = ref({
  initData: [] as Invoice[],
  addedData: [] as Invoice[],
  finishedData: [] as Invoice[],

  initPageInfo: {
    size: 10,
    current: 1,
    total: 0,
  },
  addedPageInfo: {
    size: 10,
    current: 1,
    total: 0,
  },
  finishPageInfo: {
    size: 10,
    current: 1,
    total: 0,
  },
  initStatistic: {
    amount: 0,
    count: 0,
  },
  addedStatistic: {
    amount: 0,
    count: 0,
  },
  finishStatistic: {
    amount: 0,
    count: 0,
  },
});
const addInvoiceButtonShow = computed(() => {
  const role = userStore().userInfo?.role;
  if (role) {
    return ["管理员", "公司文员"].includes(role);
  }
});

const routeToAdd = () => {
  console.log(route, "route");
  if (route.name === "发票管理(顺丰)") {
    router.push({
      name: "添加发票(顺丰)",
    });
  } else {
    router.push({
      name: "添加发票(合丰)",
    });
  }
};

const reset = () => {
  searchForm.value.buyer = "";
  searchForm.value.invoiceType = "";
  searchForm.value.month = ""
  query();
};

const freshOne = (type: string, pageSize: number) => {
  loading.value = true;
  page({
    size: pageSize,
    current: 1,
    queryCondition: {
      buyer: searchForm.value.buyer,
      invoiceType: searchForm.value.invoiceType,
      month: searchForm.value.month,
      status: type,
      seller: sellerName.value,
    },
  })
    .then((res) => {
      console.log(res);
      if (type === "INIT") {
        data.value.initData = res.records || [];
        data.value.initPageInfo = {
          size: res.size,
          current: res.current,
          total: res.total,
        };
      } else if (type === "ADDED") {
        data.value.addedData = res.records || [];
        data.value.addedPageInfo = {
          size: res.size,
          current: res.current,
          total: res.total,
        };
      } else if (type === "FINISHED") {
        data.value.finishedData = res.records || [];
        data.value.finishPageInfo = {
          size: res.size,
          current: res.current,
          total: res.total,
        };
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

const pageChange = (type: string, pageNumber: number) => {
  let size;
  if (type === "INIT") {
    size = data.value.initPageInfo.size;
  } else if (type === "ADDED") {
    size = data.value.addedPageInfo.size;
  } else if (type === "FINISHED") {
    size = data.value.finishPageInfo.size;
  }
  loading.value = true;
  page({
    size: size,
    current: pageNumber,
    queryCondition: {
      buyer: searchForm.value.buyer,
      invoiceType: searchForm.value.invoiceType,
      month: searchForm.value.month,
      status: type,
      seller: sellerName.value,
    },
  })
    .then((res) => {
      console.log(res);
      if (type === "INIT") {
        data.value.initData = res.records || [];
        data.value.initPageInfo = {
          size: res.size,
          current: res.current,
          total: res.total,
        };
      } else if (type === "ADDED") {
        data.value.addedData = res.records || [];
        data.value.addedPageInfo = {
          size: res.size,
          current: res.current,
          total: res.total,
        };
      } else if (type === "FINISHED") {
        data.value.finishedData = res.records || [];
        data.value.finishPageInfo = {
          size: res.size,
          current: res.current,
          total: res.total,
        };
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

const query = () => {
  loading.value = true;
  page({
    size: 10,
    current: 1,
    queryCondition: {
      buyer: searchForm.value.buyer,
      invoiceType: searchForm.value.invoiceType,
      month: searchForm.value.month,
      status: "INIT",
      seller: sellerName.value,
    },
  })
    .then((res) => {
      console.log(res);
      data.value.initData = res.records || [];
      data.value.initPageInfo = {
        size: res.size,
        current: res.current,
        total: res.total,
      };
      getStatistic(searchForm.value, "INIT", sellerName.value).then((res) => {
        data.value.initStatistic.amount = res.amount;
        data.value.initStatistic.count = res.count;
      });
    })
    .finally(() => {
      loading.value = false;
    });
  loading.value = true;
  page({
    size: 10,
    current: 1,
    queryCondition: {
      buyer: searchForm.value.buyer,
      invoiceType: searchForm.value.invoiceType,
      month: searchForm.value.month,
      status: "ADDED",
      seller: sellerName.value,
    },
  })
    .then((res) => {
      console.log(res);
      data.value.addedData = res.records || [];
      data.value.addedPageInfo = {
        size: res.size,
        current: res.current,
        total: res.total,
      };
      getStatistic(searchForm.value, "ADDED", sellerName.value).then((res) => {
        data.value.addedStatistic.amount = res.amount;
        data.value.addedStatistic.count = res.count;
      });
    })
    .finally(() => {
      loading.value = false;
    });

  loading.value = true;
  page({
    size: 10,
    current: 1,
    queryCondition: {
      buyer: searchForm.value.buyer,
      invoiceType: searchForm.value.invoiceType,
      month: searchForm.value.month,
      status: "FINISHED",
      seller: sellerName.value,
    },
  })
    .then((res) => {
      console.log(res);
      data.value.finishedData = res.records || [];
      data.value.finishPageInfo = {
        size: res.size,
        current: res.current,
        total: res.total,
      };
      getStatistic(searchForm.value, "FINISHED", sellerName.value).then(
        (res) => {
          data.value.finishStatistic.amount = res.amount;
          data.value.finishStatistic.count = res.count;
        }
      );
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  query();
});
</script>

<style lang="scss" scoped>
.main {
  padding: 0 20px 20px;

  @media (max-width: 768px) {
    :deep(.arco-form-item) {
      width: 100%;
    }

    .query-btn {
      margin-left: 18px;
    }
  }

  :deep(.arco-spin) {
    width: 100%;
  }
}
</style>
